<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>vue-router基础</title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/vue-router.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- router-link是vue提供的标签,默认会被渲染为a标签
              to属性被会渲染为href属性
              to属性中的值被渲染为采用#开头的hash地址
        -->
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link to="/user/3">User3</router-link>
      <router-link to="/user/4">User4</router-link>
     
      <!-- 路由占位符(路由填充位) -->
      <router-view></router-view>
    </div>
    <script>
      const User={
        props:["id"],
        template:`<h1>User组件--id={{id}}</h1>`
      }
      
      //实例化路由对象
       const router = new VueRouter({
          //通过routes属性,定义路由规则
          routes: [
             {path:'/',redirect:'/user/1'} ,
             {path:'/user/:id',component:User,props:true}
          ]
      });

      //1. 实例化一个Vue的实例
      let vm = new Vue({
        el: "#app",
        data: {},
        //router:router
        router
      });
    </script>
  </body>
</html>
